<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Official BUGATTI Automotive Website</title>
    <link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style1.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="shortcut icon" href="https://assets.bugatti.com/favicon.284416621.ico">

</head>
<body>
<!--顶部-->
<nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand" href="index.html"><img src="img/ww.webp" alt=""></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="container">


        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link a1" href="index.html">
                        CHIRON
                    </a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link " href="there.html">
                        BUGATTI

                    </a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="two.html">
                        CHIRON SPORT
                    </a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">
                        TRADITION
                    </a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">
                        MOLSHEIM

                    </a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">
                        OWNERSHIP
                    </a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </div>

</nav>



<main>
    <!--轮播图-->
    <div class="swiper-container lnbo">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="lb">
                    <h1 class="lb1">
                        110 YEARS OF BUGATTI
                    </h1>
                </div>
                <img src="img/w.webp" alt="">
            </div>
            <div class="swiper-slide">
                <a href="two.html">
                    <div class="lb">
                        <h1 class="lb1">
                            BUGATTI CHIRON<br>
                            SPORT
                        </h1>
                    </div>
                    <img src="img/hong.webp.jpg" alt="">
                </a>

            </div>

            <div class="swiper-slide">
                <div class="lb">
                    <h1 class="lb1">
                            CHIRON SPORT<br>
                            110 ANS BUGATTI
                        </h1>
                </div>
                <img src="img/lb.webp.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <div class="onoe">
        <img src="img/one1.webp" alt="">
        <h1>110 YEARS OF BUGATTI</h1>
    </div>
<!--第一部分-->
    <div class="text-con">
        <h2>CELEBRATING A LEGENDARY BRAND</h2>
        <div class="text-content-container">
            <div class="text-1">
            <p>
                BUGATTI has always been defined by the spirit of its founder, EttoreBugatti. He started the incomparable journey of the BUGATTI brand in1909 in Molsheim. In 2019 we are looking back at our legacy and proudlycelebrating our rich, unparalleled 110 year long history full of passion,craftsmanship, dynamics and elegance.
            </p>
            </div>
            <div class="text-2">
                <p>
                    With our home in Alsace, we can proudly claim to be the onlyFrench Luxury automotive brand. Discover the spectrum of BUGATTI - our incomparable past, pioneering present and exciting future.
                </p>
            </div>
        </div>
    </div>
<!--第二部分-->
    <div class="text-con1">
        <h2>BIENVENUE CHEZ BUGATTI</h2>
        <div class="text-3">
            <div class="text-3-1">
                <div class="te">
                    <img class="img-1" src="img/w3.webp" alt="">
                    <a href="">
                        La Voiture Noire
                        <img class="img2 img4" src="images/r2_03.gif" alt="">
                    </a>
                </div>
            </div>


            <div class="text-3-1">
                <div class="te1">
                    <img src="img/w4.webp" alt="">
                    <a href="">
                        CHIRON SPORT 110 ANS
                        <img class="img2 img4" src="images/r2_03.gif" alt="">
                    </a>
                </div>
            </div>

            <div class="text-3-1">
                    <div class="te1 ttt">
                        <img src="img/w5.webp" alt="">
                        <a href="">
                            DIVO
                            <img class="img2 img4" src="images/r2_03.gif" alt="">
                        </a>
                    </div>
            </div>

        </div>

        <div class="text-4">

             <div class="text-3-1">
                 <div class="te1">
                     <img src="img/w7.webp" alt="">
                     <a href="">
                         BUGATTL HISTORY
                         <img class="img2 img4" src="images/r2_03.gif" alt="">
                     </a>
                 </div>
             </div>


            <div class="text-3-1">
                <div class="te">
                    <img src="img/w8.webp" alt="">
                    <a href="">
                        CHIRON
                        <img class="img2 img4" src="images/r2_03.gif" alt="">
                    </a>
                </div>
            </div>

            <div class="text-3-1 tee">
                <div class="te1">
                    <img src="img/w6.webp" alt="">
                    <a href="">
                        MOLSHEIM
                        <img class="img2 img4" src="images/r2_03.gif" alt="">
                    </a>
                </div>
            </div>

        </div>
    </div>



<!--第三部分-->
    <div class="text-con2">

        <div class="text-3-2">
            <h2>Reminiscence of an icon</h2>
            <h3>CELEBRATION OF A MASTERPIECE</h3>
        </div>

    </div>
<!--第四部分-->
    <div class="text-con3">

        <div class="tex-2">

            <img src="img/daa.jpg" alt="">
        </div>
    </div>
<!--第五部分-->
    <div class="text-con4">
        <h2>NEWS</h2>
        <div class="new">
            <div class="news">

                <a href="">
                    <img class="img" src="img/w10.webp" alt="">
                </a>

                <div class="bug">

                    <div class="bug1">
                        <div class="bug2">
                           <span>MOLSHEIM, 07 JUNE 2019</span>
                        </div>
                        <h3>80 YEARS AGO – BUGATTI WINS 24 HOURS OF LE MANS</h3>
                        <div class="bug3">
                            <p>Bright and clinically pure. Three Chiron hyper sport cars float in the air like clouds. Bugatti´s
                                Atelier in Molsheim rather equals an operating room than an automobile production facility. There is
                                neither a smell of oilor fuel nor rattling robots or buzzing conveyor bands. But low-volume music...</p>
                        </div>
                    </div>

                    <div class="bug4">
                        <a href="">
                            TO PRESS RELEASE
                            <img class="img2" src="img/jiantou.png" alt="">
                        </a>
                    </div>
                </div>

            </div>
        </div>
        <div class="new1">


            <div class="wrp1">
                <div>
                    <img class="img3" src="img/w11.webp" alt="">
                    <div class="wrp-1">
                        <div class="wrp-2">

                            <div class="sp">
                                <span>MOLSHEIM, 29 MAY 2019</span>
                            </div>

                            <p>BUGATTI VEYRON LEGENDS – THE MODERN-DAY HYPER SPORTS CAR</p>
                        </div>
                        <div class="wrp-3">
                            <a href="">
                                TO PRESS RELEASE
                                <img class="img2" src="img/jiantou.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>

            </div>

            <div class="wrp1">
                <div>
                    <img class="img3" src="img/w12.webp" alt="">
                    <div class="wrp-1">
                        <div class="wrp-2">
                            <div class="sp">
                                <span>MOLSHEIM, 27 MAY 2019</span>
                            </div>

                            <p>LA VOITURE NOIRE WINS DESIGN AWARD AT THE VILLA D'ESTE</p>
                        </div>
                      <div>
                          <a href="">
                              TO PRESS RELEASE
                              <img class="img2" src="img/jiantou.png" alt="">
                          </a>
                      </div>
                    </div>
                </div>
            </div>

            <div class="wrp1">
                <div>
                    <img class="img3" src="img/w13.webp" alt="">
                    <div class="wrp-1">
                        <div class="wrp-2">
                            <div class="sp">
                                <span>MOLSHEIM, 27 MAY 2019</span>
                            </div>
                            <p>PHOTO RELEASE: MILLE MIGLIA – DAY 4</p>
                        </div>
                        <div>
                            <a href="">
                                TO PRESS RELEASE
                                <img class="img2" src="img/jiantou.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>


        </div>
        <div class="new2">
            <a href="">
                VIEW ALL NEWS
                <img class="img2" src="img/jiantou.png" alt="">
            </a>
        </div>
    </div>
    <!--第六部分-->
    <div class="text-con5">

        <div class="top-text">
            <div class="one">
                Fuel consumption, l/100km: 35.2 in urban areas / 15.2 in extra urban areas / 22.5 combined; combined CO
               <sub>2</sub>
                emissions g/km: 516; efficiency class: G
            </div>
            <div class="two">
                WLTP: Fuel consumption, l/100km: low 43.3 / medium 22.2 / high 18.0 / extra high 18.3 / combined 22.3; CO
               <sub>2</sub>
                emissions, combined, g/km: 506; efficiency class: G
            </div>
        </div>

        <div class="buttom-text">
            <div class="one1" id="one">
                <ul>
                    <li class="li1">
                        <a href="" title="Facebook">
                            <img class="imgg imggg" src="images/f_03.gif" alt="">
                        </a>
                    </li>
                    <li class="li2">
                        <a href="" title=" Facebook Messenger">
                            <img src="images/sd_06.gif" alt="">
                        </a>
                    </li>
                    <li class="li3">
                        <a href="" title="Whatsapp">
                            <img src="images/dh_06.gif" alt="">
                        </a>
                    </li>
                    <li class="li4">
                        <a href="" title="Twitter">
                            <img class="imgg" src="images/xn_06.gif" alt="">
                        </a>
                    </li>
                    <li class="li5">

                        <a href="" title="LinkedIn">
                            <img class="imgg" src="images/in1_06.gif" alt="">
                        </a>
                    </li>
                    <li class="li6">
                        <a href="" title="Mail">
                            <img class="imgg"  src="images/you1_06.gif" alt="">
                        </a>
                    </li>

                </ul>
            </div>

            <div class="two1" id="two1">
                <span>
                    SHARE
                    <img class="img2" src="images/sandian_03.gif" alt="">
                </span>


            </div>
        </div>

    </div>
</main>

<footer class="footer1">
        <div class="nav">
        <div title="Go" id="to-top">
            <img class="" src="images/to-top_03.gif" alt="">
        </div>
    <ul class="foot">
        <li class="di-1">
            <a href="" title="Facebook"><img class="imggg" src="images/f1_06.gif" alt=""></a>
        </li>
        <li class="di-2">
            <a href="" title="Twitter"><img class="imgg" src="images/niao1_03.gif" alt=""></a>
        </li>
        <li class="di-3">
            <a href="" title="Instagram"><img class="imgg" src="images/fang1_03.gif" alt=""></a>
        </li>
        <li class="di-4">
            <a href="" title="Pinterest">
                <img src="images/q1_03.gif" alt="">
            </a>
        </li>
        <li class="di-5">
            <a href="" title="YouTube"><img src="images/bof_03.gif" alt=""></a>
        </li>
        <li class="di-6">
            <a href=""title="LinkedIn"><img src="images/in2_03.gif" alt=""></a>
        </li>
    </ul>
</div>

    <div class="footer-zj">
        <span>© 2019 BUGATTI AUTOMOBILES S.A.S</span>
    </div>

    <div class="footer-footer">
        <ul>
            <li><a href="">CONTACT</a></li>
            <li><a href="">MEDIA</a></li>
            <li><a href="">DATA PROTECTION NOTICE</a></li>
            <li><a href="">LEGAL NOTICE</a></li>
            <li><a href="">UK MODERN SLAVERY ACT</a></li>
            <li><a href="">CODE OF CONDUCT</a></li>
        </ul>
    </div>

</footer>


<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="js/one.js"></script>
</body>
</html>